<div>
  <div class="container">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="form-group">
            <div class="form-group">
              <label for="audioType">type</label>
              <input autofocus type="text" class="form-control" id='audioType' name='audioType' placeholder="" v-model="audioType">
            </div>
            <div class="form-group">
              <label for="audioTitle">title</label>
              <input autofocus type="text" class="form-control" id='audioTitle' name='audioTitle' placeholder="" v-model="audioTitle">
            </div>
            <div class="form-group">
              <label for="audioDescribe">describe</label>
              <input autofocus type="text" class="form-control" id='audioDescribe' name='audioDescribe' placeholder="" v-model="audioDescribe">
            </div>

            <div class="form-group">
              <label for="audioDescribe">url</label>
              <input autofocus type="text" class="form-control" id='audioUrl' name='audioUrl' placeholder="" v-model="audioUrl">
            </div>

            <button class="btn btn-primary" v-on:click="onAddAudio">添加音频</button>
<!--             <button class="btn btn-danger" v-on:click="onAddBiaori">循环添加标日音频></button>
            <button class="btn btn-danger" v-on:click="onAddSakura">循环添加樱花音频</button> -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">
        {{ pageTitle }}
        </div>
        <div class="panel-body">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>类型</th>
                <th>标题</th>
                <th>描述</th>
                <th>链接</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="audioList.length > 0" v-for="(index, item) in audioList">
                <td style="width: 80px">{{ item.type }}</td>
                <td style="width: 80px">{{ item.title }}</td>
                <td style="width: 80px">{{ item.describe }}</td>
                <td>{{ item.url }}</td>
                <td style="width: 20px">
                  <div class="btn-group disabled">
                    <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      操作 <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu disabled">
                      <li><a v-on:click="onUpdateDialog(index)">编辑</a></li>
                      <li class="divider"></li>
                      <li><a v-on:click="onDelete(index)">删除</a></li>
                    </ul>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <p v-show="audioList.length < 1">无数据</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改audio dialog -->
  <div class="modal fade add-audio-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          修改
        </div>
        <div class="modal-body">
          <div class='form-group'>
            <div class="input-group">
              <label>type</label>
              <input class='form-control' id='selectedType' name='selectedType' size='30' type='text' v-model="selectedType" placeholder=""/>
            </div>
          </div>
          <div class='form-group'>
            <div class="input-group">
              <label>title</label>
              <input class='form-control' id='selectedTitle' name='selectedTitle' size='30' type='text' v-model="selectedTitle" placeholder=""/>
            </div>
          </div>
          <div class='form-group'>
            <div class="input-group">
              <label>describe</label>
              <input class='form-control' id='selectedDescribe' name='selectedDescribe' size='30' type='text' v-model="selectedDescribe" placeholder=""/>
            </div>
          </div>
          <div class='form-group'>
            <div class="input-group">
              <label>url</label>
              <input class='form-control' id='selectedUrl' name='selectedUrl' size='30' type='text' v-model="selectedUrl" placeholder=""/>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button class="btn btn-primary" v-on:click="onUpdate">添加</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var menusUtil = new MenusUtil(pagePrefix, dataPrefix);
  var vue = new Vue({
    el: '#app',
    data: {
      pageTitle: '全部',
      audioList: [],
      // input
      audioType: '',
      audioTitle: '',
      audioDescribe: '',
      audioUrl: '',
      // select
      selectedIndex: '',
      selectedType,
      selectedTitle: '',
      selectedDescribe: '',
      selectedUrl: '',
      currentPage: 1,
      pages: 1,
      canLoadData: true,
      errorMsg: '',
      successMsg: '',
      // plug
      lever: 0,
      lession: 0,
      startCount: 0,
      allCount: 0,
    },
    methods: {
      getData: function(nextPage) {
        if (nextPage > vue.pages) return;

        $.post( dataPrefix + '/audio/data',
          {
            appId: appId
          },
          function(result) {
            vue.canLoadData = true;

            if (result.err) {
              vue.errorMsg = result.err;
              return;
            }

            vue.currentPage = result.currentPage;
            vue.pages = result.pages;
            vue.updateList(result.data);
        });
      },
      updateList: function(docs) {
        docs.forEach( function(item){
          vue.audioList.push(item)
        });
      },
      onDelete: function(index) {
        if (confirm('确定要删除吗？')) {
          $.post( dataPrefix + '/audio/' + vue.audioList[index]._id + '/delete',
            {
              appId: appId,
              _csrf: $('#_csrf').val()
            },
            function (result) {
              if (result.err) {
                vue.errorMsg = result.err;
              } else {
                vue.audioList.$remove(vue.audioList[index]);
              }
          });
        }
      },
      onUpdateDialog: function(index) {
        $('.add-audio-dialog').modal('show');
        vue.selectedIndex = index;
        vue.selectedType = vue.audioList[index].type;
        vue.selectedTitle = vue.audioList[index].title;
        vue.selectedDescribe = vue.audioList[index].describe;
        vue.selectedUrl = vue.audioList[index].url;
      },
      onUpdate: function() {
        $('.add-audio-dialog').modal('hide');
        $.post( dataPrefix + '/audio/' + vue.audioList[vue.selectedIndex]._id + '/update',
          {
            appId: appId,
            _csrf: $('#_csrf').val(),
            type: vue.selectedType,
            title: vue.selectedTitle,
            describe: vue.selectedDescribe,
            url: vue.selectedUrl
          },
          function (result) {
            if (result.err) {
              vue.errorMsg = result.err;
            } else {
              vue.audioList[vue.selectedIndex].type = vue.selectedType;
              vue.audioList[vue.selectedIndex].title = vue.selectedTitle;
              vue.audioList[vue.selectedIndex].describe = vue.selectedDescribe;
              vue.audioList[vue.selectedIndex].url = vue.selectedUrl;
            }
        });
      },
      onAddAudio: function () {
        if (vue.audioType !== '' && vue.audioTitle != '' && vue.audioLabel !== '' && vue.audioUrl !== '') {
          $.post(dataPrefix + '/audio/add',
            {
              appId: appId,
              _csrf: $('#_csrf').val(),
              type: vue.audioType,
              title: vue.audioTitle,
              describe: vue.audioDescribe,
              url: vue.audioUrl
            },
            function (result) {
              if (result.err) {
                vue.errorMsg = result.err;
              } else {
              vue.audioType = '';
              vue.audioTitle = '';
              vue.audioDescribe = '';
              vue.audioUrl = '';
              vue.audioList.push(result.data)
            }
          });
        } else {
          alert('参数错误');
        }
      },
      // onAddBiaori: function () {
      //   $.post(dataPrefix + '/audio/plugs/addBiaori',{}, function (result) {});
      // },
      // onAddSakura: function () {
      //   $.post(dataPrefix + '/audio/plugs/addSakura',{}, function (result) {});
      // }
    }
  });

  var scrollButtom = new ScrollButtom();
  scrollButtom.init(function() {
    if (vue.currentPage < vue.pages && vue.canLoadData) {
      vue.canLoadData = false;
      vue.getData(vue.currentPage + 1);
    }
  });

  vue.getData();
</script>
